{% extends 'base.html' %}
{% load static %}

{% block title %}
    主页
{% endblock %}

{% block header_css %}
    <link rel="stylesheet" href="{% static 'css/index.css' %}">
{% endblock %}

{% block header_js %}
    <script src="{% static 'js/utils/utils.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
{% endblock %}

{% block container %}
    <!-- 中间内容部分start -->
    <div class="container container-page">
        <div class="view" style="background: #fff;">
            <!-- 博客列表 -->
            <div class="panel panel-default" style="margin-bottom: 0;">
                <div class="panel-heading text-right sort">
                    <a><strong>排序：</strong></a>
                    <a href="{% url 'index' %}">默认</a>
                    <a href="?update=1">按更新时间</a>
                    <a href="?read_num=1">按访问量</a>
                </div>
                <div class="panel-body article-list-group">
                    {% csrf_token %}
                    {% for article in article_list.object_list %}
                        <dl class="article-list">
                            <dt class="article-list-title">
                                <a href="/article/article_detail/{{ article.id }}"
                                   target="_blank">{{ article.title }}</a>
                            </dt>
                            {#                        {% url 'article:article-detail' article.id %}#}
                            {#                            <dd class="article-list-body">#}
                            {#                                <a href="./article-detail.html">{{ article.content | truncatewords:"4"}}</a>#}
                            {#                            </dd>#}
                            <dd class="article-list-footer">
                                <div class="info text-left">
                                    <span>{{ article.create_at }}</span>
                                    <span>阅读数：<span>{{ article.read_num }}</span></span>
                                    <span>评论数：<span>{{ article.comment_num }}</span></span>
                                    <span>点赞数：<span>{{ article.click_num }}</span></span>
                                </div>
                                <div class="edit text-right">
                                    {% if article.author == request.user %}
                                        <a href="#">取消置顶</a>
                                        <a href="{% url 'article:edit-article' article.id %}">编辑</a>
                                        <a href="javascript:void(0);" class="del-btn" data-id="{{ article.id }}">删除</a>
                                    {% else %}
                                        <a href="#">收藏</a>
                                        <a href="javascript:void(0);" class="click-num" data-id="{{ article.id }}">
                                            {% if article.id in blog_id_list %}
                                                取消点赞
                                            {% else %}
                                                点赞
                                            {% endif %}
                                        </a>
                                    {% endif %}
                                </div>
                            </dd>
                        </dl>
                    {% endfor %}
                </div>
                <!-- 分页 -->
                <div class="page">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            {# 如果有上一页就显示 #}
                            {% if article_list.has_previous %}
                                <li class="long"><a href="?{{ article_list.previous_page_number.querystring }}">上一页</a>
                                </li>
                            {% endif %}
                            {# 显示中间的页码 #}
                            {% for page in article_list.pages %}
                                {% if page %}
                                    {% ifequal page article_list.number %}
                                        <li class="active"><a href="?{{ page.querystring }}">{{ page }}</a></li>
                                    {% else %}
                                        <li><a href="?{{ page.querystring }}" class="page">{{ page }}</a></li>
                                    {% endifequal %}
                                {% else %}
                                    <li class="none"><a href="">...</a></li>
                                {% endif %}
                            {% endfor %}
                            {# 如果有下一页就显示 #}
                            {% if article_list.has_next %}
                                <li class="long"><a href="?{{ article_list.next_page_number.querystring }}">下一页</a></li>
                            {% endif %}
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <div class="sidebar" style="background: #fff;"></div>
    </div>
    <!-- 中间内容部分end -->
{% endblock %}

{% block footer %}
    <!-- 底部内容start -->
    <footer>
        <div class="container">

        </div>
    </footer>
    <!-- 底部内容end -->
{% endblock %}